<template>
  <a-modal
    :title="this.title"
    :visible="this.visible"
    :width="660"
    @cancel="cancel"
    @ok="ok"
  >
    <a-spin v-show="isUpload" size="large">
    </a-spin>
    <a-form
      v-bind="formItemLayout"
      :form="form"
    >
      <a-form-item label="文件">
        <a-upload
          v-decorator="this.validator.upload"
          :action="this.action"
          :data="this.param"
          :headers="headers"
          :showUploadList="false"
          name="file"
          @change="handleChange"
          :before-upload="beforeUpload"
          :disabled="this.see"
        >
          <a-button>
            <a-icon type="upload"/>
            选择文件
          </a-button>
        </a-upload>
        <a-button style="margin-left:40px" type="danger" @click="clearUpload">
          <a-icon type="delete"/>
          清空文件
        </a-button>
      </a-form-item>
      <a-form-item label="数据标识">
        <a-input v-decorator="this.validator.fileConfig"/>
      </a-form-item>
      <a-form-item label="日期">
        <a-date-picker v-decorator="this.validator.fileTime"/>
      </a-form-item>
      <a-form-item label="地理坐标系">
        <a-select v-decorator="this.validator.gcs">
          <a-select-option value="北京54">
            北京54
          </a-select-option>
          <a-select-option value="西安80">
            西安80
          </a-select-option>
          <a-select-option value="WGS－84">
            WGS－84
          </a-select-option>
          <a-select-option value="2000国家大地坐标系">
            2000国家大地坐标系
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="比例尺">
        <a-select v-decorator="this.validator.scale">
          <a-select-option value="1:10万">
            1:10万
          </a-select-option>
          <a-select-option value="1:25万">
            1:25万
          </a-select-option>
          <a-select-option value="1:50万">
            1:50万
          </a-select-option>
          <a-select-option value="1:100万">
            1:100万
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="范围">
        <a-tree-select
          v-decorator="this.validator.region"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="this.treeData"
          allow-clear
          show-search
          style="width: 100%"
          tree-checkable
          tree-default-expand-all
          :show-checked-strategy="SHOW_PARENT"
        >
        </a-tree-select>
      </a-form-item>
<!--      <a-form-item label="自定义范围">-->
<!--        <a-input v-decorator="this.validator.area"-->
<!--                 type="textarea"-->
<!--        />-->
<!--      </a-form-item>-->

    </a-form>
  </a-modal>
</template>

<script>
  import aModal from "@/common/modal"
  import {CLEARUPLOAD, CLEARUPLOADUPDATE, IMPORTFILE, IMPORTFILEUPDATE, REGIONTREE} from '@/../static/js/apis.js'
  import Global from '@/../static/js/global.js'
  import {TreeSelect} from "ant-design-vue";
  const SHOW_PARENT=TreeSelect.SHOW_PARENT
  export default {
    inject: ['reload'],                                 //注入App里的reload方法
    name: "importModal",
    props: ['title', 'visible', 'action', 'param', 'type', 'validator'],
    components: {
      aModal
    },
    computed: {
      headers () {
        return {
          "token" : localStorage.getItem("token")
        }
      }
    },
    data() {
      return {
        formItemLayout: {
          labelCol: {span: 6},
          wrapperCol: {span: 14},
        },
        treeData:{},
        isUpload:false,
        // validator: '',
        // uploadParam: {
        //   userId: 1
        // },
        // location: [],
        fileList:[],
        num:0,
        finishNum:0,
        see:false,
        SHOW_PARENT,
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this, {name: 'validate_other'});
    },
    methods: {
      beforeUpload(file,filelist) {
        // console.log(filelist);
        // this.fileList = [...this.fileList, file];
        // this.fileList = filelist;
        // if(filelist.length>Global.maxFileNum){
        //   // if(this.num ===0){
        //   //   this.$message.error("文件数量超出限制！")
        //   // }
        //   filelist = [];
        //   return false;
        // }else{
        //   this.isUpload = true;
        // }
        //文件类型
        var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (fileName !== 'zip' && fileName !== 'rar') {
          this.$message.error('文件类型必须是zip或rar!')
          return false
        }else{

          this.isUpload=true;
        }

      },
      handleChange(info) {

        // if (info.file.status !== 'uploading') {
        //   //console.log(info);
        //   if(this.fileList.length > Global.maxFileNum && this.num === 0) {
        //     this.num++;
        //     this.fileList=[];
        //     // info.fileList=[];
        //     this.$message.error("文件数量超出限制！文件数不得超过"+Global.maxFileNum)
        //     return  false;
        //   }else if(this.num !== 0){
        //     this.num ++;
        //   }
        //   // else if(this.fileList.length > Global.maxFileNum){
        //   //   return false;
        //   // }
        // }/*else if(info.file.status === 'error'&&this.num !== 0){
        //     this.num =0;
        //  }*/
        // console.log(this.num);
        // if (info.file.status === 'done' && this.fileList.length<=Global.maxFileNum) {
        //   //this.isUpload=false;
        //   this.$message.success(`${info.file.name} 上传成功`);
        //   // this.fileList=[];
        //   this.num = 0;
        //   this.finishNum++;
        // } else if (info.file.status === 'error' && this.fileList.length<=Global.maxFileNum) {
        //   this.$message.error(`${info.file.name} 上传失败`);
        //   // this.fileList=[];
        //   this.num = 0;
        //   this.finishNum++;
        // }
        //
        //
        // console.log(info);
        // if(( info.file.status === 'done'||info.file.status === 'error')&& this.finishNum==this.fileList.length){
        //   // console.log(this.fileList);
        //   this.isUpload=false;
        //   this.finishNum=0;
        //   this.fileList=[];
        //   info.fileList=[];
        //
        // }else if(this.num==this.fileList.length){
        //   this.num = 0;
        // }
        if(info.file.status==='done'){
          this.isUpload=false;
          this.see=true;
          this.$message.success(`${info.file.name} 上传成功`);
        }else if (info.file.status === 'error'){
          this.isUpload=false;
          this.$message.success(`${info.file.name} 上传失败`);
        }

      },

      clearUpload() {
        let self = this
        if (self.type == '新建') {
          CLEARUPLOAD(this.param, function (res) {
            self.form.resetFields('upload')
            self.$message.success(res.message);
            self.see=false;
          })
        } else {
          CLEARUPLOADUPDATE(this.param, function (res) {
            self.form.resetFields('upload')
            self.$message.success(res.message);
            self.see=false;
          })
        }

      },

      ok(e) {
        let self = this;
        e.preventDefault();
        if (self.type == '新建') {
          self.form.validateFields((err, values) => {
            if (!err) {
              values.fileTime = values.fileTime.format('YYYY-MM-DD')
              console.log('Received values of form: ', values);
              values.userId = self.param.userId
              values.menuId = 13
              IMPORTFILE(values, function (res) {
                  if(res.code=='200'){
                      self.$message.success(res.message);
                      self.reload()
                  }else{
                    self.$message.error(res.message);
                  }
              })
              this.visible = false;
            }
          });
          self.see=false
        } else {
          console.log(self.validator)
          self.form.validateFields((err, values) => {
            if (!err) {
              values.fileTime = values.fileTime.format('YYYY-MM-DD')
              console.log('Received values of form: ', values);
              values.userId = self.param.userId
              values.fileId = self.param.fileId
              values.menuId = 13
              IMPORTFILEUPDATE(values, function (res) {
                  if(res.code=='200'){
                      self.$message.success(res.message);
                      self.reload()
                  }else{
                    self.$message.error(res.message);
                  }
              })
              this.visible = false;
            }
          });
          self.see=false
        }
      },
      /*关闭modal*/
      cancel(e) {
        this.form.resetFields();
        this.clearUpload();
        this.see=false;
        this.$emit("cancel", e)
      },
      getStaticData() {
        let self = this;
        // GETALLREGION('',function(res){
        //   console.log(res.obj[1]);
        //   self.location = res.obj;
        //
        // })
        REGIONTREE('', function (res) {
          self.treeData = res.obj
        })
      }
    },
    created() {
      this.getStaticData()
    }

  }
</script>

<style scoped>
.ant-spin-spinning {
  height: 300px;
  width: 600px;
  background: #eeeeee91;
  line-height: 200px;
  position: absolute;
  z-index: 1000;
}
</style>
